<template>
    <div>
        <h1>显示分页查询</h1>
        <a href="Add">添加</a>
        用户名：<input type="text" v-model="paeg.hoseName">
        价钱：<input type="text" v-model="paeg.hosePicr1">-<input type="text" v-model="paeg.hosePicr2">
        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <td>用户名</td>
                    <td>价格</td>
                    <td>房型</td>
                    <td>照片</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="m in data">
                    <td>{{m.hoseName}}</td>
                    <td>{{m.hosePicr}}</td>
                    <td>{{m.typeName}}</td>
                    <td><img :src="'https://localhost:7164'+m.hpseImg" alt="" style="width: 100px; height: 100px;"></td>
                    <td>{{m.zhuangtai?"上架":"下架"}}</td>
                    <td>
                        <input type="button" value="修改" @click="Upd(m.hoseId)">
                        <input type="button" value="删除" @click="Del(m.hoseId)">
                        <a :href="'https://localhost:7164'+m.hpseImg" target="_blank">查看图片</a>
                    </td>
                    
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="fen(1)">
        <input type="button"  value="上一页" @click="fen(2)">
        <input type="button" value="下一页" @click="fen(3)">
        <input type="button" value="尾页" @click="fen(4)">
        一共{{ prcount.count}}条，一共{{ prcount.pcount }}页，当前第{{ paeg.pageindex }}页，每页{{ paeg.pagesize }}条
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();
//删除
const Del=(hoseId:any)=>{
    if(!confirm("确定删除吗？"))
    {
        return;
    }
    axios.get("https://localhost:7164/api/Hose/Delete",{params:{hoseId:hoseId}}).then(res=>{
        if(res.data>0)
    {
        alert("删除成功！");
        location.href="Show";
    }
    else
    {
        alert("删除失败！")
    }
    })
}
//修改
const Upd=(hoseId:any)=>{
    router.push({path:"/Update",query:{hoseId:hoseId}});
}
//反填
const FanTian=(hoseId:any)=>{
    router.push({path:"/Xiang",query:{hoseId:hoseId}});
}
//分页
const fen=(e:any)=>{
    if(e==1)
    {
        paeg.value.pageindex=1;
        Show();
    }
    if(e==2)
    {
        if(paeg.value.pageindex>1)
        {
            paeg.value.pageindex-=1;
            Show();
        }
    }
    if(e==3)
    {
        if(paeg.value.pageindex<prcount.value.pcount)
        {
            paeg.value.pageindex+=1;
            Show();
        }
    }
    if(e==4)
    {
        paeg.value.pageindex=prcount.value.pcount;
        Show();
    }
}
const paeg=ref({
    hoseName: "",
    hosePicr1: 0,
    hosePicr2: 0,
    pageindex:1,
    pagesize:2
})
const prcount=ref({
    count:0,
    pcount:0
})
//显示
onMounted(()=>{
    Show();
})
const data=ref([{
    "hoseId": 0,
    "hoseName": "",
    "pwd": "",
    "hosePicr": 0,
    "typeName": "",
    "hpseImg": "",
    "zhuangtai": true
}])
const Show=()=>{
    axios.get("https://localhost:7164/api/Hose/GetAll",{params:paeg.value}).then(res=>{
        data.value=res.data.data;
        prcount.value.count=res.data.count;
        prcount.value.pcount=Math.ceil(res.data.count/paeg.value.pagesize);
    })
}
</script>

<style scoped>

</style>